<template>
  <div v-loading='loading'>
    <el-button @click="toEditer(-1,null)" type="primary" size='small'>添加商户</el-button>
    <editer :editerData='editerData' @edited='edited'></editer>
    <el-table :data='merchantList' :style="'margin-top:20px;min-height:'+(height-180)+'px'" size="mini">
      <el-table-column type="expand" width="20">
      <template slot-scope="scope">
        <merchantView :merchant='scope.row'></merchantView>
      </template>
      </el-table-column>
      <el-table-column prop="merchantCode" label="商家编码" min-width="80" align="left"></el-table-column>
      <el-table-column prop="companyName" label="商家名称" min-width="150" align="left"></el-table-column>
      
      <el-table-column prop="merchantType" label="商家类型" min-width="80" align="center">
         <template slot-scope="scope">
          <span v-if="scope.row.merchantType=='PERSON'">个体</span>
          <span v-else>企业</span>
        </template>
      </el-table-column>
      <el-table-column prop="contactName" label="联系人" min-width="120" align="center"></el-table-column>
      <el-table-column label="小程序" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.miniAppsEntrance" style='color:teal'>已开通</span>
          <span v-else style='color:red'>未开通</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="账户状态" width="100" align="center"></el-table-column> -->
      <!-- <el-table-column prop="createTime" label="开户时间" width="200" align="center"></el-table-column> -->
      <el-table-column prop="endTime" label="服务到期时间" width="200" align="center"></el-table-column>
      <el-table-column label="操作" width="320" align="center">
        <template slot-scope="scope">
          <el-button @click="toEditer(scope.$index,scope.row)" size='mini'>编辑</el-button>
          <el-button @click="logBoot(scope.$index,scope.row)" size='mini'>记录</el-button>
          <el-button @click="resetPW(scope.$index,scope.row)" size='mini'>密码重置</el-button>
          <el-button @click="deleteMerchant(scope.$index,scope.row)" type='danger' size='mini'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:10px"
      @current-change="loadMerchantList"
      :current-page.sync="page.currentPage"
      :page-size="page.limit"
      layout="total, prev, pager, next"
      :total="page.total">
    </el-pagination>
    <merchantLog :logBootData="logBootData"></merchantLog>
  </div>
</template>

<script>
import editer from "@/components/merchant/editer"
import merchantView from "@/components/merchant/merchantView"
import merchantLog from "@/components/merchant/merchantLog"

export default {
  name: 'merchant',
  data(){
    return {
      loading:true,
      height:window.innerHeight,
      merchantList:[],
      page:{},
      editerIndex:null,
      logBootData:{
        show:false,
        merchantId:'',
        merchantName:''
      },
      editerData:{
        show:false,
        editerLoading:false,
        editerBody:'商家信息',
        merchant:{
          merchantId:'',
          merchantCode:'',
          merchantName:'',
          loginName:'',
          merchantType:'PERSON',
          companyName:'',
          companyPhone:'',
          address:'',
          contactName:'',
          contactMobile:'',
          wechat:'',
          email:'',
          qq:'',
          contract:'',
          businessLicence:'',
          imageList:[],
          activationFee:0.00,
          miniAppsEntrance:false,
          h5Entrance:false,
          singleClassify:false,
          catId:'',
          moreClassify:false,
          basicMall:false,
          seniorMall:false,
          showModelRela:false,
          componentSearch:false,
          vinSearch:false,
          vinNum:0,
          qixiubaoStyle:false,
          cascader:false,
          memberAudit:true,
          mustLogin:true,
          maintenanceUpload:false,
          onlineService:false,
          limitMonth:null,
          remark:''
        },
        wechatMerchant:{},
        cateTree:[],
        catIds:[],
        renew:{
          renewal:0,
          cost:0.00
        }
      }
    }
  },
  methods:{
    //页面商家列表的初始化
    merchantListInit:function(){
      this.loadMerchantList(1);
    },
    loadMerchantList(currentPage){
      this.$http.post(this.$store.state.url+'/merchant/list','currentPage='+currentPage).then(
        response=>{
          this.merchantList=response.data.data.merchantList;
          this.page=response.data.data.page;
          this.loading=false
        }
      ).catch(error=>{});
    },
    //初始化编辑器数据并打开编辑器
    toEditer:function(index,row){
      this.editerIndex=index;
      if(row==null)this.editerData.merchant.merchantId="";
      else this.editerData.merchant.merchantId=row.merchantId;
      this.editerData.editerBody='商家信息';
      this.editerData.show=true;
      this.editerData.editerLoading=true;
    },
    //编辑完成后的数据同步
    edited:function(merchant){
      var index=this.editerIndex;
      if(index==-1){
        this.merchantList.unshift(merchant);
        this.editerIndex=0;
      }else{
        for(var key in merchant)this.merchantList[this.editerIndex][key]=merchant[key];
      }
      this.editerData.show=false;
    },
    //重置密码
    resetPW:function(index,row){
      this.$confirm('将商家密码初始化, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params=new URLSearchParams();
          params.append('token','1');
          params.append('userId','1');
          params.append('merchantId',row.merchantId);
          this.$http.post(this.$store.state.url+"/merchant/passwordreset",params).then(
            response=>{
              if(response.data.status==200)this.$message({message: '密码重置成功',type: 'success'});
              else this.$message.error('密码重置失败,'+response.data.message);
            }
          ).catch(
            error=>{this.$message.error('密码重置失败');}
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        }
      );
    },
    //删除商户
    deleteMerchant:function(index,row){
      this.$confirm('此操作将永久删除该商户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var params=new URLSearchParams();
          params.append('token','1');
          params.append('userId','1');
          params.append('merchantId',row.merchantId);
          params.append('real',true);
          this.$http.post(this.$store.state.url+"/merchant/delete",params).then(
            response=>{
              if(response.data.status==200){
                this.deleted(index,row);
                this.$message({message: '商户删除成功',type: 'success'});
              }else this.$message.error('商户删除失败,'+response.data.message);
            }
          ).catch(
            error=>{this.$message.error('商户删除失败');}
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        }
      );
    },
    //商家删除后的数据显示同步
    deleted:function(index,row){
      if(this.merchantList[index].merchantId==row.merchantId)this.merchantList.splice(index,1);
    },
    logBoot:function(index,row){
      this.logBootData.merchantId=row.merchantId;
      this.logBootData.merchantName=row.merchantName;
      this.logBootData.show=true;
    }
  },
  components:{
      editer:editer,
      merchantView:merchantView,
      merchantLog:merchantLog
  },
  created:function(){
    window.onresize=()=>{
      this.height=window.innerHeight;
    }
    this.merchantListInit();
  }

}
</script>

<style scoped>

</style>
